<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <link rel="stylesheet" href="../css/index.css">
    <style>
        .e1{
            width:500px;
        }
        img{
            width: 80px;
            height: 80px;
            object-fit: cover;
        }

    </style>
</head>
<body>
<div id="app">
    <el-card class="box-card">
        <el-form :inline="true" class="demo-form-inline" class="a1">
            <!-- 输入提示框 -->

            <el-form-item label="题目编号">
                <el-input v-model="wrong.id" placeholder="题目编号"></el-input>
            </el-form-item>

            <el-form-item label="用户编号">
                <el-input v-model="wrong.uname" placeholder="用户编号"></el-input>
            </el-form-item>

            <el-form-item label="状态">
                <el-select v-model="wrong.status" placeholder="班级状态">
                    <el-option label="所有" value="2"></el-option>
                    <el-option label="已查看" value="1"></el-option>
                    <el-option label="未查看" value="0"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="getclass(1)">查询</el-button>
            </el-form-item>
        </el-form>

        <!-- 表格 -->
        <el-table
                :data="wronginfo.records"
                border>
            <el-table-column
                    label="题目编号"
                    align="center"
            >
                <template slot-scope="scope">
                    <span>{{ scope.row.qid }}</span>
                </template>
            </el-table-column>

            <el-table-column
                    label="修改信息"
                    align="center"
            >
                <template slot-scope="scope">
                    <span>{{ scope.row.content }}</span>
                </template>
            </el-table-column>

            <el-table-column label="操作" align="center" width="160px">
                <template slot-scope="scope">
                    <el-button
                               size="mini"
                               @click="open(scope.row)">查看题目</el-button>
                </template>
            </el-table-column>

            <el-table-column label="操作" align="center" width="160px">
                <template slot-scope="scope">
                    <el-button v-if="scope.row.status == 0"
                               size="mini"
                               class="ban"
                               @click="look(scope.row)">确定查看</el-button>
                    <el-tag v-if="scope.row.status === 1">已查看</el-tag>
                </template>
            </el-table-column>
        </el-table>

        <!--页码-->
        <br/>
        <div class="block">
            <span class="demonstration"></span>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage4"
                    :page-sizes="[10,20,30,40,50]"
                    :page-size="pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
    </el-card>

    <!--    弹窗-->
    <el-dialog title="题目详情" :visible.sync="qus">
        <!--        题目显示-->
        <div v-if="one.type == '填空题'">
            {{one.content}}
            <br/><br/>
            <img style="width: 200px;height: 200px" v-if="one.image != null && one.image?.trim() !== ''" class="i1" :src="one.image">
            <br/><br/>
            正确答案：{{formattedCorrectAnswers}}
            <br/><br/>
        </div>
        <div v-if="one.type == '单选题' || one.type == '多选题'">
            {{one.content}}
            <br/><br/>
            <img style="width: 200px;height: 200px" v-if="one.image != null && one.image?.trim() !== ''" class="i1" :src="one.image">
            <ol type="A">
                <li v-for="a in one.items.split(';')"><input type="checkbox" :checked="a.trim().startsWith('$')" disabled>{{a.replace(/^\$/, '')}}</li>
            </ol>
        </div>
        <div v-if="one.type == '判断题'">
            {{one.content}}
            <br/><br/>
            <img style="width: 200px;height: 200px" v-if="one.image != null && one.image?.trim() !== ''" class="i1" :src="one.image">
            <ol type="A">
                <li><input type="checkbox" disabled :checked="one.items == 'true'">对</li>
                <li><input type="checkbox" disabled :checked="one.items == 'false'">错</li>
            </ol>
        </div>
        <div v-if="one.type == '问答题'">
            {{one.content}}
            <br/><br/>
            <img style="width: 200px;height: 200px" v-if="one.image != null && one.image?.trim() !== ''" class="i1" :src="one.image">
        </div>
        <div>
            解析思路：{{one.ideas}}
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="qus = false">取 消</el-button>
        </div>
    </el-dialog>


</div>
<script src="../../js/vue.js"></script>
<script src="../js/index.js"></script>
<script src="../../js/axios.js"></script>
<script src="../../js/qs.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            wrong:{
                id: '',
                uname: '',
                status: '2'
            },
            wronginfo: [],
            searchone:[],//存取搜索数据
            currentPage4: 1,	//当前所在的页
            total:0,			//总数
            pagesize:10,		//每页数量
            qus: false,
            one: {},
        },
        methods: {
            //获取全部班级
            getclass(val){
                this.currentPage4 = val;
                this.searchone = this.wrong;
                let p = new URLSearchParams();
                p.append("currentPage4", this.currentPage4);
                p.append("pagesize", this.pagesize);
                p.append("id", this.searchone.id);
                p.append("uname", this.searchone.uname);
                p.append("status", this.searchone.status);
                axios.post("../../cloud-other/wrong/getwrong", p).then(res=>{
                    this.wronginfo = res.data;
                    this.total = this.wronginfo.total;
                });
            },
            //每页展示数据条数的调整
            handleSizeChange(val) {
                //变化每页值的数量
                this.pagesize = val;
                this.getclass(1);
            },
            //控制页面的跳转
            handleCurrentChange(val) {
                this.getclass(val);
            },
            //查看
            look(obj){
                axios.get("../../cloud-other/wrong/look?id=" + obj.id).then(res=>{
                    this.$message(res.data.msg);
                    this.getclass(this.currentPage4);
                });
            },
            open(obj){
                axios.get("../../cloud-other/question/getbyid?id=" + obj.qid).then(res=>{
                    this.one = res.data.data;
                });
                this.qus = true;
            },

        },
        created(){
            this.getclass(1);
        },
        computed: {
            // 计算属性来格式化正确答案
            formattedCorrectAnswers() {
                if (!this.one.items) return ''; // 如果没有items，则返回空字符串
                const answers = this.one.items.split(';'); // 使用分号分割字符串
                if (answers.length === 1) {
                    // 如果只有一个答案，直接返回
                    return answers[0];
                } else {
                    // 如果有多个答案，将分号替换为、并返回
                    return answers.join('、');
                }
            }
        },
        mounted(){
        }
    });
</script>
</body>
</html>